<template>
  <div class="about">
    <div class="item">
      <li>基本简介</li>
      <li>面试评价</li>
      <li>公司问答</li>
    </div>
    <div class="aboutus">
      <div class="title">关于我们</div>
      <div class="content" ref="ac">
        {{companyMsg.company_describe}}
      </div>
      <div class="openbtn" ref="openbtn" @click="openaboutus">展开</div>
    </div>
    <div class="product">
      <div class="title">主要产品</div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in companyMsg.company_product" :key="item.id">
            <div class="logo">
              <img :src="item.product_logo" alt />
            </div>
            <div class="name">{{item.product_name}}</div>
            <div class="label">
              <li>{{item.product_type}}</li>
            </div>
            <div class="content">{{item.product_describe}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="business">
      <div class="title">工商信息</div>
      <div class="content">
        <li><span>公司全称</span>{{companyMsg.company_allname}}</li>
        <li><span>成立时间</span>{{companyMsg.company_buildtime}}</li>
        <li><span>注册资本</span>{{companyMsg.company_registeredcapital}}</li>
        <li><span>法定代表</span>{{companyMsg.company_legalrepresentative}}</li>
      </div>
    </div>
    
    
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Swiper from "swiper";

export default {
  name: "cDetailAbout",
  components: {},
  props: {
    companyMsg: Object
  },
  data() {
    return {};
  },
  computed: {
    //   ...mapState({userMsg: "userMsg"})
  },
  methods: {
    openaboutus() {
      // this.$refs.ac
      if (this.$refs.openbtn.innerHTML == "展开") {
        this.$refs.ac.style.cssText =
          "-webkit-box-orient: inline-axis;overflow: visible;text-overflow: clip;";
        this.$refs.openbtn.innerHTML = "收起";
      } else {
        this.$refs.ac.style.cssText =
          "-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;";
        this.$refs.openbtn.innerHTML = "展开";
      }
    }
  },
  activated() {
    var swiper = new Swiper(".swiper-container", {
      slidesPerView: 1.3,
      slidesOffsetAfter: document.body.clientWidth * 0.115,
      slidesOffsetBefore: 20,
      spaceBetween: 10
      // loop: true
    });
  }
};
</script>
<style lang="scss" scoped>
@import "~styles/varibles.styl";

.about {
  position: relative;
  overflow: hidden;
  color: #000;
  width: 100vw;
  font-size: 0.32rem;
  list-style: none;
  .item {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 0.3rem 0.4rem;
    border-bottom: 0.01rem solid #eaeaea;

    li {
      float: left;
      font-size: 0.4rem;
    }
  }
  .title {
    margin-top: 0.3rem;
    margin-left: 0.3rem;
    font-size: 0.45rem;
    font-weight: bold;
  }
  .aboutus {
    position: relative;
    .content {
      margin-top: 0.3rem;
      margin-left: 0.3rem;
      font-size: 0.32rem;
      line-height: 1.6em;
      width: 85vw;
      color: #666666;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      letter-spacing: 0.1em;
    }
    .openbtn {
      position: absolute;
      bottom: 0.1rem;
      right: 0.5rem;
      color: seagreen;
    }
  }
  .product {
    .swiper-container {
      margin-top: 0.3rem;
      .swiper-slide {
        position: relative;
        height: 20vh;
        border-radius: 2.5vw;
        background: rgb(248, 244, 244);
        // border: 1px solid red;
        .logo {
          position: absolute;
          width: 15vw;
          height: 15vw;
          // border: 0.02rem solid #cccccc;
          border-radius: 0.2rem;
          position: absolute;
          top: 0.5rem;
          left: 0.4rem;
          img {
            width: 100%;
          }
        }
        .name {
          position: absolute;
          top: 0.5rem;
          left: 25vw;
          font-size: 0.45rem;
          font-weight: bold;
          // border: 1px solid red;
        }
        .label {
          position: absolute;
          top: 1.2rem;
          left: 25vw;
          font-size: 0.3rem;
          color: #888;
          li{
            float: left;
            margin-right: 0.1rem;
            padding: 0.1rem;
            border: 0.02rem solid #cccccc;
          }
        }
        .content{
          position: absolute;
          width: 5.5rem;
          bottom: 0.5rem;
          left: 0.4rem;
          font-size: 0.25rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .business{
    .content{
      color: #777;
      li{
        margin-top: 0.5rem;
        margin-left: 0.4rem;
        span{
          margin-right: 0.5rem;
        }
      }
    }
  }
  
}
</style>
